<template>
  <view class="box">
    <!-- 轮播图 -->
    <u-swiper :list="lbtList" :height="300" class="lbt"></u-swiper>
    <!-- 弹出优惠券 -->

    <u-popup
      :show="show3"
      @close="close"
      mode="center"
      :round="10"
      @open="open"
    >
      <view style="width: 600rpx">
        <image
          src="/static/imgs/guanbi.png"
          style="
            height: 50rpx;
            width: 50rpx;
            position: absolute;
            top: 20rpx;
            right: 20rpx;
          "
          @click="show3 = false"
        ></image>
        <view
          style="
            text-align: center;
            font-weight: bold;
            margin: 20rpx;
            font-size: 50rpx;
          "
          ><text style="color: red">新人</text>优惠券</view
        >
        <view class="popup-content">
          <view class="coupon">
            <view class="coupon-header">
              <text class="coupon-amount">¥5</text>
              <text class="coupon-desc" style="color: red">满100可减5元</text>
            </view>
            <view class="coupon-body">
              <text class="coupon-text" style="color: red">全场通用</text>
              <view class="coupon-validity"></view>
            </view>
          </view>
          <button class="btn-redeem" @click="redeemCoupon">立即领取</button>
        </view>
      </view>
    </u-popup>

    <!-- 分类专区 -->
    <view class="goodType">
      <view style="height: 30rpx"></view>
      <!-- 一行的分区盒子 -->
      <view style="display: flex; flex-wrap: wrap">
        <view class="goodBoxTop" v-for="(init, index) in goodTypeInfo">
          <view class="goodBox" :style="{ background: init.color }">
            <image :src="init.img" class="goodImg"></image>
          </view>
          <view style="margin-top: 10rpx">{{ init.name }}</view>
        </view>
      </view>
      <view style="height: 30rpx"></view>
    </view>
    <view style="height: 430rpx"></view>
    <!-- 小广告区域 -->
    <view style="background-color: white">
      <!-- 广告1 -->
      <view style="display: flex; padding: 20rpx; margin: 20rpx">
        <image src="/static/imgs/g1.png" class="g1"></image>
        <image src="/static/imgs/g1.png" class="g1"></image>
        <image src="/static/imgs/g1.png" class="g1"></image>
      </view>
      <!-- 广告2 -->
      <view style="display: flex; justify-content: center">
        <image src="/static/imgs/g2.png" class="g2"></image>
      </view>
    </view>

    <!-- 新人专区 -->
    <view class="xrbox">
      <view class="xr1">
        <view class="xr1-1" style="display: flex; margin: 20rpx; color: white">
          <view>新人专区</view>
          <view class="xr1-p">专属9.5折起</view>
          <view style="flex: 1"></view>
          <image
            src="../../static/imgs/jt1.png"
            style="width: 40rpx; height: 40rpx"
          ></image>
        </view>
        <view style="height: 10rpx"></view>
        <!-- 商品 -->
        <view
          style="
            display: flex;
            margin: 10rpx;
            flex-wrap: wrap;
            justify-content: space-between;
          "
        >
          <view class="xr2">
            <image
              src="https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png"
              class="xr2-1"
            ></image>
            <view style="margin-top: 10rpx; font-size: 20rpx; color: red"
              >162.96元</view
            >
          </view>

          <view class="xr2">
            <image
              src="https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png"
              class="xr2-1"
            ></image>
            <view style="margin-top: 10rpx; font-size: 20rpx; color: red"
              >162.96元</view
            >
          </view>

          <view class="xr2">
            <image
              src="https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png"
              class="xr2-1"
            ></image>
            <view style="margin-top: 10rpx; font-size: 20rpx; color: red"
              >162.96元</view
            >
          </view>

          <view class="xr2">
            <image
              src="https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png"
              class="xr2-1"
            ></image>
            <view style="margin-top: 10rpx; font-size: 20rpx; color: red"
              >162.96元</view
            >
          </view>
        </view>
      </view>
    </view>

    <!-- 热门推荐 -->
    <view style="margin: 30rpx">
      <h2>热门推荐</h2>
      <view
        style="
          display: flex;
          margin-top: 30rpx;
          justify-content: space-between;
          flex-wrap: wrap;
        "
      >
        <view class="tjGood" @click="goodinfo()">
          <image
            src="https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png"
            class="tjGoodImg"
          ></image>
          <view class="tjGoodText">
            {{ name }}
          </view>
          <view
            style="
              font-size: 40rpx;
              color: red;
              margin-right: 140rpx;
              margin-bottom: 20rpx;
            "
          >
            ¥ 15.60
          </view>
        </view>

        <view class="tjGood">
          <image
            src="https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png"
            class="tjGoodImg"
          ></image>
          <view class="tjGoodText">
            {{ name }}
          </view>
          <view
            style="
              font-size: 40rpx;
              color: red;
              margin-right: 140rpx;
              margin-bottom: 20rpx;
            "
          >
            ¥ 15.60
          </view>
        </view>

        <view class="tjGood">
          <image
            src="https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png"
            class="tjGoodImg"
          ></image>
          <view class="tjGoodText">
            {{ name }}
          </view>
          <view
            style="
              font-size: 40rpx;
              color: red;
              margin-right: 140rpx;
              margin-bottom: 20rpx;
            "
          >
            ¥ 15.60
          </view>
        </view>
        <view class="tjGood"></view>
        <!-- / -->
      </view>
    </view>
  </view>
</template>
<script>
import {
  tvadd, //添加电视设备
  intTvId, //检查是否注册过
} from "@/api/all.js";
import image from "uview-ui/libs/config/props/image";
export default {
  data() {
    return {
      show3: true,
      name: "这是AI生成的一张美女图片,需要使用AI可以开通会员即可免费使用",
      lbtList: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
      ], //轮播图
      goodTypeInfo: [
        {
          name: "水果生鲜",
          img: "/static/imgs/p1.png",
          color: "red",
        },
        {
          name: "家用电器",
          img: "/static/imgs/p2.png",
          color: "#0DA2FB",
        },
        {
          name: "家居家装",
          img: "/static/imgs/p1.png",
          color: "green",
        },
        {
          name: "美妆护肤",
          img: "/static/imgs/p2.png",
          color: "#FCC83F",
        },
        {
          name: "服饰鞋包",
          img: "/static/imgs/p1.png",
          color: "purple",
        },
        {
          name: "母婴玩具",
          img: "/static/imgs/p2.png",
          color: "orange",
        },
        {
          name: "食品饮料",
          img: "/static/imgs/p1.png",
          color: "pink",
        },
        {
          name: "运动户外",
          img: "/static/imgs/p2.png",
          color: "brown",
        },
      ], //商品分类
    };
  },
  methods: {
    //商品信息页面
    goodinfo() {
      uni.navigateTo({
        url: "/pages/index/goodInfo",
      });
    },
  },
};
</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.popup-content {
  width: 85%;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
}

.coupon {
  border: 1px dashed #f1f1f1;
  border-radius: 10px;
  padding: 15px;
  background: linear-gradient(135deg, #ff9a9e 0%, #f1f1f1 100%);
  margin-bottom: 15px;
}

.coupon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coupon-amount {
  font-size: 24px;
  color: #ff5000;
  font-weight: bold;
}

.coupon-desc {
  font-size: 16px;
  color: #333;
}

.coupon-body {
  margin-top: 10px;
}

.coupon-text {
  font-size: 18px;
  color: #333;
}

.coupon-validity {
  font-size: 14px;
  color: #666;
}

.btn-redeem {
  width: 100%;
  /* padding: 10px; */
  background-color: #01d7d6;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}
.ute {
}
.tjGoodText {
  margin: 20rpx;
  font-size: 25rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tjGoodImg {
  width: 90%;
  margin-top: 30rpx;
  height: 400rpx;
}
.tjGood {
  margin-top: 10rpx;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 10rpx;
  width: 49%;
}
.xr2-1 {
  height: 170rpx;
  width: 140rpx;
  margin-top: 10rpx;
}
.xr2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5rpx;
  padding: 10rpx;
  /* margin: 10rpx; */
  background-color: white;
  justify-content: space-between;
}
.xr1-p {
  background-color: white;
  border-radius: 50rpx;
  width: 160rpx;
  margin-left: 50rpx;
  height: 40rpx;
  text-align: center;
  font-size: 20rpx;
  line-height: 40rpx;
  color: #fe5938;
}
.xr1 {
  width: 95%;
  height: 350rpx;
  margin: 30rpx;
  border-radius: 25rpx;
  background: linear-gradient(to bottom, #fe6842, red);
}
.xrbox {
  background-color: white;
  display: flex;
  margin-top: 30rpx;
  justify-content: center;
}
.g2 {
  height: 180rpx;
  width: 80%;
}
.g1 {
  margin: 10rpx;
  width: 200rpx;
  height: 100rpx;
}
.goodBoxTop {
  flex: 1;
  margin: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.goodBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80rpx;
  padding: 20rpx;
  border-radius: 50%;
  height: 80rpx;
  /* 你可以根据需要调整高度 */
  background-color: green;
  /* 为了更明显地看到效果 */
}

.goodImg {
  max-width: 80%;
  /* 防止图片超出容器 */
  max-height: 80%;
  /* 防止图片超出容器 */
}

.goodType {
  z-index: 999;
  position: absolute;
  margin-top: -50rpx;
  font-size: 25rpx;
  border-radius: 25rpx;
  background-color: white;
}

.box {
  /* margin: 50rpx; */
  height: 300rpx;
  background-color: pink;
  border-radius: 20rpx;
}

.box1 {
  font-weight: bold;
  font-size: 45rpx;
  color: white;
  text-align: center;
  line-height: 300rpx;
}

page {
  background-color: #f1f1f1;
}
</style>
